<template>
  <div class="sdy-search">
    <SdyHeader title="啥都有" back>
      <template #title>
        <van-search v-model="searchText" shape="round" background="#c72418" placeholder="请输入搜索关键词" />
      </template>
      <template #right>
        <van-button @click="searchHandler" type="success">搜索</van-button>
      </template>
    </SdyHeader>
    <!-- 搜索相关内容 -->
    <!-- <SdySearchHistory></SdySearchHistory>
  <SdySearchList></SdySearchList> -->

    <component :is="searchText ? SdySearchList : SdySearchHistory"></component>
  </div>
</template>
  
<script setup lang="ts">
import SdySearchList from './components/SdySearchList.vue';
import SdySearchHistory from './components/SdySearchHistory.vue';
import { ref, watch ,provide} from 'vue'
import { useRouter, type Router } from 'vue-router'
const $router: Router = useRouter()

// 导入相关接口
import { searchListApi } from '@/api/goods'
//导入相关 ts 接口
import type { MyHotItem } from '@/config/interface'
// 准备一个数据，和 文本框 交互
const searchText = ref<string>('')

// 点击搜索按钮跳转商品详情页
const searchHandler = () => {
  const text = searchText.value.trim()
  // console.log(text);
  // 非空验证
  if (!text) return
  //跳转路由
  $router.push({ path: '/goodlist', query: { search: text } })
}

// 准备一个数据，表示搜索列表
const searchList=ref<MyHotItem[]>([])

// 随着搜索的关键字实时请求最新的相关数据
watch(searchText, async () => {
  if (!searchText.value.trim()) return
  // console.log("请求数据");
  const res = await searchListApi(searchText.value.trim())
  // console.log(res);
  searchList.value = res.data

})
//把数据传出去
provide('searchList', searchList)
</script>
  
 
<style scoped lang="scss">

</style>